<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/list.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <ul class="list-group">
            <li class="list-group-item" v-for="n in news" v-bind:class="n">
                {{n}}
            </li>
        </ul>
        <ul>
            <li v-for="(p,key,i) in person">
                {{i}}--> {{key}}-->{{p.name}}
            </li>
        </ul>
    </div>
    <div class="col-lg-12">
        <div class="panel">
            <input class="form-control"
                   v-model="newTodoText"
                   v-on:keyup.enter="addNewTodo"
                   placeholder="Add a todo"
            >
            <ul class="list-group">
                <li class="list-group-item"
                    is="todo-item"
                    v-for="(todo, index) in todos"
                    v-bind:title="todo"
                    v-bind:index="index"
                    v-on:remove="todos.splice(index, 1)"
                ></li>
                    <!--v-on:remove="todos.pop(todo)"-->
            </ul>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="panel panel-info">
            <div class="panel-heading">Person</div>
            <div class="panel-body">
                <p>person info for student</p>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Username</th>
                    <th>Age</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(p,i) in person" v-bind:class="{'success':i % 2 == 0,'warning': i % 2 == 1}">
                    <th scope="row">{{ i }}</th>
                    <td>{{ p.name }}</td>
                    <td>{{ p.age }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    Vue.component('todo-item', {
        template: '\
    <li>\
      {{index+1}}. {{ title }}\
      <button class="btn btn-sm" v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
        props: ['title', 'index']
    });
    var vue = new Vue({
        el: "#box",
        data: {
            news: {
                'list-group-item-success': 'list-group-item-success',
                'list-group-item-info': 'list-group-item-info',
                'list-group-item-warning': 'list-group-item-warning',
                'list-group-item-danger': 'list-group-item-danger'
            },
            person: {
                1: {
                    name: 'zrx',
                    age: 22
                },
                2: {
                    name: 'zing',
                    age: '23'
                },
                3: {
                    name: 'zhangrxiang',
                    age: '19'
                },
                4: {
                    name: 'zhangrxiang',
                    age: '19'
                },
                5: {
                    name: 'zhangrxiang',
                    age: '19'
                },
                6: {
                    name: 'zhangrxiang',
                    age: '19'
                }
            },
            newTodoText: '',
            todos: [
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
            ]
        },
        methods: {
            addNewTodo: function () {
                if (this.newTodoText !== '') {
                    this.todos.push(this.newTodoText)
                }
                this.newTodoText = ''
            }
        }
    })
</script>